import 'package:cached_network_image/cached_network_image.dart';
import 'package:earclean/app/config/colors.dart';
import 'package:earclean/app/modules/widget/app_bar_widget.dart';
import 'package:earclean/app/modules/widget/login_button.dart';
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';

import 'package:get/get.dart';

import '../controllers/serveinfo_controller.dart';

class ServeinfoView extends GetView<ServeinfoController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const AppBarWidget(titleStr: '服务详情页'),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
                color: ColorConfig.white,
                child: Column(
                  children: [
                    swiperWidget(),
                    titleWidget(),
                  ],
                )),
            SizedBox(height: 15),
            Container(
                padding:
                    const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                color: ColorConfig.white,
                child: Column(
                  children: [
                    Column(
                      children: [
                        // 理疗流程： 这里是服务过程 功效及人群： 服务人群： 服务禁忌： 这里是服务禁忌 温馨提示：
                        Container(
                          width: 1.sw,
                          child: Text('理疗流程：',
                              style: TextStyle(
                                  fontSize: 16.sp,
                                  color: ColorConfig.body1_txt_color)),
                        ),
                        Obx(() => Html(data: controller.serviceProcess.value)),
                      ],
                    ),
                    Column(
                      children: [
                        // 理疗流程： 这里是服务过程 功效及人群： 服务人群： 服务禁忌： 这里是服务禁忌 温馨提示：
                        Container(
                          width: 1.sw,
                          child: Text('功效及人群：',
                              style: TextStyle(
                                  fontSize: 16.sp,
                                  color: ColorConfig.body1_txt_color)),
                        ),
                        Obx(() => Html(data: controller.userGroup.value)),
                      ],
                    ),
                    Column(
                      children: [
                        // 理疗流程： 这里是服务过程 功效及人群： 服务人群： 服务禁忌： 这里是服务禁忌 温馨提示：
                        Container(
                          width: 1.sw,
                          child: Text('服务禁忌：',
                              style: TextStyle(
                                  fontSize: 16.sp,
                                  color: ColorConfig.body1_txt_color)),
                        ),
                        Obx(() => Html(data: controller.taboos.value)),
                      ],
                    ),
                    Column(
                      children: [
                        // 理疗流程： 这里是服务过程 功效及人群： 服务人群： 服务禁忌： 这里是服务禁忌 温馨提示：
                        Container(
                          width: 1.sw,
                          child: Text('温馨提示：',
                              style: TextStyle(
                                  fontSize: 16.sp,
                                  color: ColorConfig.body1_txt_color)),
                        ),
                        Obx(() => Html(data: controller.warmReminder.value)),
                      ],
                    ),
                  ],
                )),
            SizedBox(height: 15),
            Container(
              width: 1.sw,
              height: 45,
              margin: EdgeInsets.symmetric(horizontal: 30.w),
              child: LoginButton(
                "选择技师",
                enable: true,
                onPressed: () {
                  controller.toJishi();
                },
              ),
            ),
            SizedBox(height: 30)
          ],
        ),
      ),
    );
  }

  Container titleWidget() {
    return Container(
      color: ColorConfig.white,
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Row(
        children: [
          Obx(() => Text(controller.projectName.value,
              style: const TextStyle(
                  fontSize: 16, color: ColorConfig.body1_txt_color))),
          const SizedBox(width: 15),
          Obx(() => Text(controller.projectTimer.value,
              style: const TextStyle(fontSize: 14, color: Color(0xFF333333)))),
          const Spacer(),
          Obx(() => Text(controller.projectPrice.value + '/次',
              style: const TextStyle(fontSize: 14, color: Colors.red)))
        ],
      ),
    );
  }

  Widget swiperWidget() {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16),
      clipBehavior: Clip.hardEdge,
      decoration: const BoxDecoration(
          // color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(11))),
      width: 1.sw,
      child: AspectRatio(
          aspectRatio: (1.sw - 36) / ((1.sw - 36) * 180 / (1.sw - 36)),
          child: Obx(() => Swiper(
              autoplay: true,
              loop: true,
              viewportFraction: 1,
              scale: 1,
              //自动轮播
              duration: 1000,
              key: ValueKey(controller.bannerList.length),
              itemBuilder: (c, i) {
                return InkWell(
                  onTap: () => {},
                  child: CachedNetworkImage(
                    imageUrl: controller.bannerList[i],
                    fit: BoxFit.fill,
                  ),
                );
              },
              itemCount: controller.bannerList.length))),
    );
  }
}
